import React, { memo } from 'react'
import { renderRoutes } from 'react-router-config'
import { NavLink } from 'react-router-dom'

import { dicoverMenu } from '@/common/local-data'

import {
  DiscoverWrap,
  TopMenu
} from './style'

export default memo(function Discover(props) {

  const { route } = props

  return (
    <DiscoverWrap>
      <TopMenu>
        <div className="content wrap-v2">
          {
            dicoverMenu.map(i => {
              return (
                <NavLink to={i.link} key={i.title} className="menu-item">{i.title}</NavLink>
              )
            })
          }
        </div>
      </TopMenu>
      {renderRoutes(route.routes)}
    </DiscoverWrap>
  )
})
